<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { uploadCsv } from './astar.js'
import axios from 'axios';
import { mapObj } from '../mapInfoObj/initMap';

const shipMap = {
    '0': 'Container Ship',
    '1': 'Tanker',
    '2': 'Cargo Ship',
    '3': 'Pusher Tug',
    '4': 'Fishing vessel',
    '5': 'Sailing vessel'
}

const colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3', '#FFC0CB', '#FF1493', '#FFD700', '#00FF7F', '#00FFFF', '#000000', '#FF00FF', '#800000', '#808000', '#008000', '#800080', '#008080', '#000080', '#808080', '#C0C0C0', '#FFA500', '#FF4500', '#FF8C00', '#FF69B4', '#FF6347', '#FF00FF', '#FF00FF', '#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3', '#FFC0CB', '#FF1493', '#FFD700', '#00FF7F', '#00FFFF', '#000000', '#FF00FF', '#800000', '#808000', '#008000', '#800080', '#008080', '#000080', '#808080', '#C0C0C0', '#FFA500', '#FF4500', '#FF8C00', '#FF69B4', '#FF6347', '#FF00FF', '#FF00FF']

const lineListLayer = ref([])
const idList=ref([])
const handleSuccess2 = (res, file, fileList) => {

    let formData = new FormData()
    formData.append('file', file.raw)
    uploadCsv(formData).then(res => {
        // console.log(res)
        let lineList = res.data.data
        // 根据MMSI不同来画线，LAT,LON是经纬度
        let mId = ''
        lineListLayer.value = []
        lineList.forEach(item => {
            if (item.MMSI != mId) {
                idList.value.push(item.MMSI)
                mId = item.MMSI
                lineListLayer.value.push([])
            }
            lineListLayer.value[lineListLayer.value.length - 1].push([Number(item.LAT), Number(item.LON) + 360])
            // L.circleMarker([Number(item.LAT),Number(item.LON)+360],{color:'red',radius:1}).addTo(mapObj.map)
        })
        lineListLayer.value.forEach((item, idx) => {
            // L.polyline(item,{color:'red'}).addTo(mapObj.map)
            let line = L.polyline(item, { color: colors[idx] }).addTo(mapObj.map)
        })
    })
}

const resultList=ref([])
const handlePredict = () => {
    axios({
        method: 'get',
        url: 'http://1.117.43.38:8000/predict',
    }).then(res => {
        resultList.value=JSON.parse(res.data.all_true).map((item,idx)=>{
            return {
                MMSI:idList.value[idx],
                shipType:shipMap[item],
                color:colors[idx]
            }
        })
        // 删除最后一个
        resultList.value.pop()
    })
}
</script>

<template>
    <div class="cbsb">
        <div id="up">
            <el-upload action="http://1.117.43.38:8000/upload" :on-success="handleSuccess2" :before-upload="beforeUpload2"
                multiple style="padding: 5px;" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    <em>点击或拖拽上传 CSV文件</em>
                </div>
            </el-upload>
            <el-button type="primary" size="default" @click="handlePredict">预测</el-button>

        </div>
        <div>
            <el-table :data="resultList" style="width: 100%;height: 100%;">
                <el-table-column prop="MMSI" label="MMSI">
                </el-table-column>
                <el-table-column prop="color" label="颜色">
                    <template #default="{row}">
                        <div :style="{width:'100%',height:'20px',backgroundColor:row.color}"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="shipType" label="船舶类型">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style lang="less" scoped>
.cbsb {
    height: 100%;
}
</style>